<template>
  <view class="message-page">
    <!-- 顶部导航栏 -->
    <!-- <view class="header-nav">
      <view class="nav-content">
        <view class="back-btn" @click="goBack">
          <text class="iconfont-v2 icon-youjiantou back-icon" style="transform: rotate(180deg);"></text>
        </view>
        <view class="page-title">消息</view>
        <view class="more-btn" @click="showMore">
          <text class="iconfont-v2 icon-gengduo more-icon"></text>
        </view>
      </view>
    </view> -->

    <!-- 消息列表 -->
    <view class="message-list">
      <view class="message-item" v-for="(message, index) in messageList" :key="index" @click="openMessage(message)">
        <view class="message-avatar">
          <view class="avatar-circle" :style="{ backgroundColor: message.avatarColor }">
            <image v-if="message.avatar" :src="message.avatar" alt="avatar" />
            <text v-else class="avatar-icon">{{ message.avatarIcon }}</text>
          </view>
        </view>
        
        <view class="message-content">
          <view class="message-header">
            <view class="sender-info">
              <text class="sender-name">{{ message.senderName }}</text>
              <text class="sender-title">{{ message.senderTitle }}</text>
            </view>
            <text class="message-time">{{ message.time }}</text>
          </view>
          
          <text class="message-text">{{ message.content }}</text>
          <text class="message-subtitle" v-if="message.subtitle">{{ message.subtitle }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 消息列表数据
      messageList: [
        {
          id: 1,
          type: 'notification',
          avatar: null,
          avatarIcon: '+',
          avatarColor: '#9C88FF',
          senderName: '丛台区...发布了新的职位',
          senderTitle: '',
          content: '32位商家新发布',
          subtitle: '',
          time: '06:32'
        },
        {
          id: 2,
          type: 'chat',
          avatar: 'http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg',
          avatarIcon: '',
          avatarColor: '',
          senderName: '李刚',
          senderTitle: 'LDD创意 · 招聘者',
          content: '[送达]您正在招的美工我很有兴趣,如...',
          subtitle: '',
          time: '06:32'
        },
        {
          id: 3,
          type: 'chat',
          avatar: 'http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg',
          avatarIcon: '',
          avatarColor: '',
          senderName: '李刚',
          senderTitle: 'LDD创意 · 招聘者',
          content: '[已读]您正在招的美工我很有兴趣,如...',
          subtitle: '',
          time: '06:32'
        }
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    showMore() {
      uni.showToast({
        title: '更多功能',
        icon: 'none'
      });
    },
    openMessage(message) {
      if (message.type === 'notification') {
        uni.showToast({
          title: '查看职位通知',
          icon: 'none'
        });
      } else if (message.type === 'chat') {
        uni.showToast({
          title: '打开聊天',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.message-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.header-nav {
  background: transparent;
  padding: 20rpx 30rpx;
  padding-top: 80rpx;
  
  .nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .back-btn {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      
      .back-icon {
        font-size: 40rpx;
        color: #333;
      }
    }
    
    .page-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }
    
    .more-btn {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      
      .more-icon {
        font-size: 36rpx;
        color: #666;
      }
    }
  }
}

.message-list {
  padding: 20rpx;
  
  .message-item {
    background: white;
    border-radius: 24rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    
    &:hover {
      transform: translateY(-2rpx);
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
    }
    
    .message-avatar {
      margin-right: 24rpx;
      flex-shrink: 0;
      
      .avatar-circle {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        
        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .avatar-icon {
          font-size: 48rpx;
          color: white;
          font-weight: 600;
        }
      }
    }
    
    .message-content {
      flex: 1;
      min-width: 0;
      
      .message-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12rpx;
        
        .sender-info {
          display: flex;
          flex-direction: column;
          
          .sender-name {
            font-size: 32rpx;
            color: #333;
            font-weight: 600;
            margin-bottom: 4rpx;
          }
          
          .sender-title {
            font-size: 24rpx;
            color: #666;
          }
        }
        
        .message-time {
          font-size: 24rpx;
          color: #999;
          flex-shrink: 0;
        }
      }
      
      .message-text {
        font-size: 28rpx;
        color: #333;
        line-height: 1.5;
        margin-bottom: 8rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      
      .message-subtitle {
        font-size: 24rpx;
        color: #666;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
    }
  }
}
</style>